<template>
  <!-- 流动人口入住情况 -->
  <div class="boxEcharts">
    <div class="boxtitle">流动人口入住状况</div>
    <div id="myChart" class="v-fill-size"></div>
  </div>
</template>

<script>
import { defineComponent, onMounted, inject } from "vue";
export default defineComponent({
  name: "ChartState",
  setup() {
    const $echarts = inject("$echarts");
    const init = () => {
      // 基于准备好的dom，初始化echarts实例
      let myChart = $echarts.init(
        document.getElementById("myChart")
      );
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        //设置备注柱体或折线代表意思
        legend: {
          top: "10%",
          right: "center",
          itemGap: 3, // 设置间距
          textStyle: {
            //图例文字的样式
            color: ["#F1BBF7", "#8B76F2"],
            fontSize: 10,
          },
          data: ["新入住人数", "退租人数"],
        },
        //设置右上角转换柱形图折线图保存图片
        toolbox: {
          show: true,
          feature: {
            magicType: { show: true, type: ["line", "bar"] },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        //设置柱形多少和内容
        xAxis: [
          {
            type: "category",
            splitLine: {
              show: false, //网格线是否显示
              lineStyle: {
                color: ["#315070"],
                width: 1,
                type: "solid",
              },
            },
            data: ["1月", "2月", "3月", "4月", "5月", "6月"],
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#459696", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
            axisLabel: {
              textStyle: {
                color: "#459696", //坐标值得具体的颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true, //网格线是否显示
              lineStyle: {
                color: ["#E6E6FA"],
                width: 0.1,
                type: "solid",
              },
            },
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#459696", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
            axisLabel: {
              textStyle: {
                color: "#459696", //坐标值得具体的颜色
              },
            },
          },
        ],
        series: [
          {
            color: "#F1BBF7",
            name: "新入住人数",
            type: "bar",
            data: [9, 26, 151, 169, 71, 54],
            itemStyle: {
              normal: {
                //这里是重点
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#F1BBF7",
                    "#F1BBF7",
                    "#F1BBF7",
                    "#F1BBF7",
                    "#F1BBF7",
                    "#F1BBF7",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
          {
            color: "#8B76F2",
            name: "退租人数",
            type: "bar",
            data: [34, 7, 121, 146, 61, 181],
            markPoint: {
              itemStyle: {
                normal: {
                  show: true,
                  color: "red",
                },
                emphasis: {
                  show: true,
                  borderColor: "#fff",
                  borderWidth: 3,
                },
              },
            },
            itemStyle: {
              normal: {
                //这里是重点
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#8B76F2",
                    "#8B76F2",
                    "#8B76F2",
                    "#8B76F2",
                    "#8B76F2",
                    "#8B76F2",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      });
    };

    onMounted(() => init());
  },
});
</script>

<style>
</style>